<!--
 * @Author: 清羽
 * @Date: 2022-08-21 22:46:51
 * @LastEditTime: 2022-10-02 17:48:57
 * @LastEditors: you name
 * @Description: 
-->
<!-- list 页 -->
<template>
  <div class="app-container">

    <el-row
      :gutter="20"
      type="flex"
      justify="space-between"
      style="margin-bottom:1rem ;"
    >
      <el-col
        :span="10"
        style="display: flex;"
      >
        <el-input
          v-model="addProductNameInput"
          placeholder="请输入商品名称"
        ></el-input>
        <el-button
          style="margin-left:1rem ;"
          @click="addProduct"
        >添加商品</el-button>
      </el-col>
    </el-row>

    <el-table
      :data="productList"
      border
      style="width: 100%"
      :span-method="validateProductFull"
      :default-sort="{prop: 'created_at', order: 'descending'}"
      v-loading="formLoading"
    >

      <el-table-column
        width="180"
        prop="created_at"
        sortable
      >
        <template slot="header">
          <span>创建时间</span>
        </template>
        <template slot-scope="scope">
          <span>{{scope.row.created_at | formatDate}}</span>
        </template>
      </el-table-column>
      <!-- 创建时间end -->

      <el-table-column
        prop="name"
        min-width="360"
      >
        <template
          slot="header"
          slot-scope="scope"
        >
          <!-- <span>商品名称</span> -->
          <el-row>
            <el-col :span="12">
              商品名称
            </el-col>
            <el-col :span="10">
              <el-input
                size="mini"
                v-model="searchProductNameKeywordInput"
                placeholder="搜索商品名称"
                prefix-icon="el-icon-search"
                @change="searchProduct"
              />
            </el-col>
          </el-row>
        </template>
        <template slot-scope="scope">
          <el-row>
            <el-col :span="20">
              <div>
                {{scope.row.name}}
              </div>
            </el-col>
            <el-col :span="4">
              <div
                style="color:#F56C6C ;"
                v-if="scope.row.business_cate_id == null || scope.row.cate_id == null || scope.row.image == null || scope.row.slider_image == null || scope.row.unit == null || scope.row.postage == null"
              ><i class="el-icon-warning-outline" /> 商品信息未完善</div>
            </el-col>
          </el-row>

        </template>
      </el-table-column>
      <!-- 商品名称end -->

      <el-table-column
        prop="cate_id.cateName"
        label="所属商城分类"
        min-width="180"
      >
      </el-table-column>
      <!-- 所属商城分类end -->

      <el-table-column
        prop="business_cate_id.cate_name"
        label="所属店铺分类"
        min-width="180"
      >
      </el-table-column>
      <!-- 所属店铺分类end -->

      <el-table-column
        label="删除状态"
        width="110"
        align="center"
        prop="is_del"
        :filters="[{text:'已删除',value:1},{text:'未删除',value:0}]"
        :filter-method="filterDel"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.is_del==1?'danger':''">
            {{scope.row.is_del==1?'已删除':'未删除'}}
          </el-tag>
        </template>
      </el-table-column>
      <!-- 删除状态end -->

      <el-table-column
        class-name="status-col"
        align="center"
        label="上架状态"
        width="110px"
        prop="is_show"
        :filters="[{text:'未上架',value:0},{text:'已上架',value:1}]"
        :filter-method="filterShow"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.is_show==0?'info':'success'">
            {{scope.row.is_show==0?'未上架':'已上架'}}
          </el-tag>
        </template>
      </el-table-column>
      <!-- 上架状态end -->

      <el-table-column
        class-name="status-col"
        align="center"
        label="审核状态"
        width="110px"
        prop="is_check"
        :filters="[{ text: '待审核', value: 0 }, { text: '审核通过', value: 1 },{ text: '审核失败', value: 2 },{text:'未提交审核',value:null}]"
        :filter-method="filterCheck"
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.is_check==null?'warning':(scope.row.is_check==0?'info':(scope.row.is_check==1?'success':(scope.row.is_check==2?'danger':'warning')))"
          >
            <!-- {{scope.row.is_check==0?'待审核':(scope.row.is_check==1?'审核通过':'审核失败')}} -->
            {{scope.row.is_check==null?'未提交审核':(scope.row.is_check==0?'待审核':(scope.row.is_check==1?'审核通过':(scope.row.is_check==2?'审核不通过':"错误")))}}
          </el-tag>
          <!-- <el-tag
            v-if="scope.row.is_check==0"
            type="info"
          >
            待审核
          </el-tag>
          <el-tag
            v-if="scope.row.is_check==2"
            type="danger"
          >
            审核失败
          </el-tag>
          <el-tag
            v-if="scope.row.is_check==1"
            type="success"
          >
            审核通过
          </el-tag> -->
        </template>
      </el-table-column>
      <!-- 审核状态end -->

      <el-table-column
        align="center"
        label="操作"
        width="140"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-edit"
            @click="edit(scope.row._id,scope.row.name)"
          >编辑</el-button>
        </template>
      </el-table-column>

    </el-table>
    <!-- 商品列表end -->

  </div>
</template>

<script>
import { getProductList, addProduct } from '@/api/business/product'

export default {
  // beforeRouteEnter (to, from, next) {
  //   console.log("beforeRouteEnter => from", from)
  //   console.log("beforeRouteEnter => to", to)
  //   // ...
  // },
  name: "list",
  data () {
    return {
      productList: [],
      searchProductNameKeywordInput: '', //商品名称关键字  --查询 
      addProductNameInput: '',
      formLoading: false
    }
  },
  components: {},
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.getDataList()
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  filters: {
    // formatDate (val) {
    //   console.log("formatDate => val", val)
    //   var moment = require("moment");
    //   return moment(Number(val)).format("YYYY-MM-DD HH:mm:ss");
    // },
    formatDate: function (value) {
      const date = new Date(value)
      const y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m
    }
  },
  // 函数
  methods: {
    getDataList (data) { // 获取商品列表
      this.formLoading = true
      getProductList(data).then(response => {
        this.productList = response.data.data.content
        this.formLoading = false
      })
    },
    searchProduct () { // 搜索商品名称
      const keyword = { keyword: this.searchProductNameKeywordInput }
      this.getDataList(keyword)
    },
    addProduct () {  // 添加商品
      const data = { productName: this.addProductNameInput }
      addProduct(data).then(response => {
        this.addProductNameInput = ''
        this.getDataList()
        // this.$router.push({
        //   name: 'addProduct',
        //   query: {
        //     productId: response.data.data._id
        //   }
        // })
      })
    },
    /**
     * 表格合并
     * @param {*} param0
     * row 表格每一行的数据
     * column 表格每一列的数据
     * rowIndex 表格的行索引,不包括表头,从0开始
     * columnIndex 表格的列索引,从0开始
     */
    validateProductFull ({ row, column, rowIndex, columnIndex }) {  // 验证商品信息是否填完,未填完,则合并表格
      // console.log(row, column, rowIndex, columnIndex)
      // 打印出的数据就是表格当前行的数据,当前列的数据,索引
      if (row.business_cate_id == null || row.cate_id == null || row.image == null || row.slider_image == null || row.unit == null || row.postage == null) {
        // 合并第二行
        if (columnIndex === 1) {
          // 从第二列开始
          return [1, 3]
          // 这里返回的是行和列的合并数量,可以返回一个数组,也可以返回一个对象,效果一样
          // 这里rowspan为1是行有一行合并,colspan为3是列有3列合并,你要合并几行几列就写上相应的数字
          // return {
          //    rowspan: 1,
          //    colspan: 3
          //  }
          // 这里要写一个else的判断,不然被合并列的原始数据会填充到合并之后的表格里
          // 这个判断是把合并的第3列,第4列的值省略,在合并的表格右边直接填原先第5列的值,合并了几列,就省略几列的值
        } else if (columnIndex === 2 || columnIndex === 3) {
          return [0, 0]
        }
      }
    },
    filterCheck (value, row) { // 过滤审核状态
      return row.is_check === value
    },
    filterShow (value, row) { // 过滤上架状态
      return row.is_show === value
    },
    filterDel (value, row) {  // 过滤删除状态
      return row.is_del === value
    },
    edit (productId, productName) {  // 点击编辑
      // console.log("edit => value", value)
      this.$router.push({
        path: `/product/add`,
        query: {
          productId,
          productName
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.list {
}
</style>